<template>
  <div class="custom-tab-page">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="custom-tab-ruleForm"
      v-if="showItem"
    >
      <div class="form-child">
        <el-form-item prop="content" style="width: 100%">
          <el-input
            :rows="4"
            placeholder="输入跟进记录"
            type="textarea"
            class="tab1-textarea"
            v-model="ruleForm.content"
          />
        </el-form-item>
        <div class="form-child-foot">
          <el-form-item prop="contact_id">
            <el-tree-select
              default-expand-all
              node-key="id"
              filterable
              v-model="ruleForm.contact_id"
              :data="userData"
              check-strictly
              :render-after-expand="false"
              :props="{
                label: 'name',
              }"
              style="width: 100%"
              placeholder="选择联系人"
              clearable
            >
            </el-tree-select>
          </el-form-item>
          <el-form-item prop="communication">
            <el-select
              clearable
              filterable
              v-model="ruleForm.communication"
              placeholder="跟进方式"
              style="width: 100%"
            >
              <el-option
                v-for="item in followList"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item prop="cc">
            <el-select
              clearable
              filterable
              v-model="ruleForm.cc"
              placeholder="关联商机"
              style="width: 100%"
            >
              <el-option
                v-for="item in businessList"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item style="width: 180px !important" prop="next_time">
            <el-date-picker
              v-model="ruleForm.next_time"
              type="datetime"
              placeholder="下次跟进时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="ruleForm.status == 0"
            />
          </el-form-item>
          <el-form-item style="width: 110px !important">
            <el-checkbox
              :true-label="0"
              :false-label="1"
              v-model="ruleForm.status"
              label="设为无效客户"
              name="type"
              @change="handleCheckbox"
            />
          </el-form-item>
          <el-form-item style="width: auto !important">
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="logs-list" v-if="listArr.length > 0" v-loading="loading">
      <div class="logs-list-item" v-for="item in listArr">
        <div class="left">
          <el-image
            style="width: 46px; height: 46px"
            :src="imgSrc"
            :zoom-rate="1.2"
            fit="cover"
          />
        </div>
        <div class="right">
          <div class="title right-space">
            {{ item.contact?.name }}
            <span v-if="item.contact?.post"> ({{ item.contact?.post }}) </span>
          </div>
          <div class="user right-space">创建人:{{ item.created_user }}</div>
          <div class="time right-space">
            <span class="time-1">
              <img src="../../../../assets/imgs/icon/icon3.png" alt="" />
              <span> 时间:{{ item.created_at }} </span>
            </span>
            <span class="time-2">
              <img src="../../../../assets/imgs/icon/icon4.png" alt="" />
              <span> 下次拜访时间:{{ item.next_time }} </span>
            </span>
          </div>
          <div class="label right-space">
            <span v-if="item.opportunity_name">
              #{{ item.opportunity_name }}#
            </span>
            {{ item.content }}
          </div>
        </div>
      </div>
      <div>
        <el-pagination
          :small="true"
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[20, 50, 100, 200]"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div v-else class="log-no">暂无跟进记录</div>
  </div>
</template>
<script setup>
import { customerOptionsApi } from "@/plugins/api/shopping/user";
import { listApi as dictApi } from "@/plugins/api/system/dict";
import {
  followUpIndexApi,
  followUpAddApi,
} from "@/plugins/api/customer/manage/my";
import imgSrc from "@/assets/imgs/icon/icon5.png";
import { optionsApi as treePersonApi } from "@/plugins/api/customer/manage/contacts";
const props = defineProps({
  dataInfo: {
    type: Object,
    default: {},
  },
  showItem: {
    type: Boolean,
    default: false,
  },
});
let ruleForm = ref({
  status: 1,
});
let rules = {
  content: [{ required: true, message: "", trigger: "blur" }],
  contact_id: [{ required: true, message: "", trigger: "change" }],
  communication: [{ required: true, message: "", trigger: "change" }],
};
//联系人
let userData = ref([]);
function getUsers() {
  treePersonApi({
    customer_id: props.dataInfo.id,
  }).then((res) => {
    userData.value = res;
  });
}
// 跟进方式
let followList = ref([
  {
    id: "电话",
    name: "电话",
  },
  {
    id: "上门",
    name: "上门",
  },
  {
    id: "微信",
    name: "微信",
  },
]);
// 关联商机
let businessList = ref([]);
// 获取字典项
function getDictionary(dict_id) {
  return new Promise((resolve, reject) => {
    dictApi({ dict_id: dict_id }).then((data) => {
      resolve(data);
    });
  });
}
// 分页
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getData();
};
//
let listArr = ref([]);
let loading = ref(false);
function getData() {
  followUpIndexApi({
    page: currentPage.value,
    pageSize: pageSize.value,
    customer_id: props.dataInfo.id,
  }).then((res) => {
    listArr.value = res.list;
    total.value = res.page.total;
  });
}
let ruleFormRef = ref(null);
function submit() {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let obj = { ...ruleForm.value };
      obj.customer_id = props.dataInfo.id;
      followUpAddApi(obj).then(() => {
        ElMessage.success("添加成功！");
        if (ruleFormRef.value) ruleFormRef.value.resetFields();
        ruleForm.value = {
          status: 1,
        };
        getData();
      });
    } else {
      console.log("error submit!", fields);
    }
  });
}
function handleCheckbox(data) {
  if (data === 0) {
    ruleForm.value.next_time = "";
  }
}
function initFun() {
  getUsers();
  getDictionary(6).then((data) => {
    businessList.value = data;
  });
  getData();
}
defineExpose({
  initFun,
});
//
onMounted(() => {
  // getUsers();
  // getDictionary(6).then((data) => {
  //   businessList.value = data;
  // });
  // getData();
});
</script>
<style lang="scss" scoped>
.custom-tab-page {
  width: 100%;

  .custom-tab-ruleForm {
    .form-child {
      border: 1px solid #dfe1e6;
      border-radius: 5px;

      :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px
          var(--el-input-border-color, var(--el-border-color)) inset;
        resize: none;
        cursor: default;
      }

      .form-child-foot {
        border-top: 1px solid #dfe1e6;
        display: flex;

        :deep(.el-form-item) {
          width: 130px;
          overflow: hidden;
          margin: 10px 5px;
        }
      }
    }
  }

  .logs-list {
    margin-top: 25px;

    .logs-list-item {
      width: 100%;
      display: flex;

      padding-bottom: 20px;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;

      .left {
        padding-left: 15px;
      }

      .right {
        margin-left: 15px;

        .right-space {
          margin-bottom: 8px;
        }

        .title {
          font-size: 16px;
          font-weight: 600;
          color: #172b4d;
        }

        .user {
          font-size: 14px;
          font-weight: 500;
          color: #5e6c84;
        }

        .time {
          .time-1 {
            font-size: 14px;

            font-weight: 500;
            color: #5e6c84;

            img,
            span {
              vertical-align: middle;
            }
          }

          .time-2 {
            margin-left: 10px;
            vertical-align: middle;
            font-size: 14px;
            font-weight: 500;
            color: #e4750e;

            img,
            span {
              vertical-align: middle;
            }
          }
        }

        .label {
          font-size: 14px;
          font-weight: 500;

          span {
            color: #005ecc !important;
          }
        }
      }
    }
  }

  .log-no {
    font-size: 12px;
    color: #868788;
    text-align: center;
    margin-top: 20%;
  }
}
</style>
